<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/stuWelcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>英语版块</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/englishList' }">英语角</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    标题-->
    <div class="light">
      <h3>永远的朋友</h3>
    </div>
    <div class="content">
      <p>"A friend walk in when the rest of the world walks out."  </p>
      <p>"别人都走开的时候，朋友仍与你在一起。” </p>
      <p>Sometimes in life, </p>
      <p>有时候在生活中， </p>
      <p>You find a special friend; </p>
      <p>你会找到一个特别的朋友;  </p>
      <p>Someone who changes your life just by being part of it.</p>
      <p>他只是你生活中的一部分内容，却能改变你整个的生活。 </p>
      <p>Someone who makes you laugh until you can‘t stop;</p>
      <p>他会把你逗得开怀大笑；</p>
      <p>Someone who makes you believe that there really is good in the world.</p>
      <p>他会让你相信人间有真情。</p>
      <p>　Someone who convinces you that there really is an unlocked door just waiting for you to open it.  </p>
      <p>他会让你确信，真的有一扇不加锁的门，在等待着你去开启。</p>
      <p>This is Forever Friendship.</p>
      <p>这就是永远的友谊。</p>
      <p>when you‘re down, </p>
      <p>当你失意，</p>
      <p>and the world seems dark and empty, </p>
      <p>当世界变得黯淡与空虚，</p>
      <p>Your forever friend lifts you up in spirits and makes that dark and empty world suddenly seem bright and full. </p>
      <p>你真正的朋友会让你振作起来，原本黯淡、空虚的世界顿时变得明亮和充实。</p>
      <p>Your forever friend gets you through the hard times,the sad times,and the confused times. </p>
      <p>你真正的朋友会与你一同度过困难、伤心和烦恼的时刻。</p>
      <p>　If you turn and walk away,</p>
      <p>你转身走开时，</p>
      <p>Your forever friend follows,</p>
      <p>真正的朋友会紧紧相随，</p>
      <p>If you lose you way,</p>
      <p>你迷失方向时，</p>
      <p>Your forever friend guides you and cheers you on. </p>
      <p>真正的朋友会引导你，鼓励你。</p>
      <p>Your forever friend holds your hand and tells you that everything is going to be okay. </p>
      <p>真正的朋友会握着你的手，告诉你一切都会好起来的。</p>
      <p>And if you find such a friend,</p>
      <p>如果你找到了这样的朋友，</p>
      <p>You feel happy and complete,</p>
      <p>你会快乐，觉得人生完整，</p>
      <p>Because you need not worry,</p>
      <p>因为你无需再忧虑。</p>
      <p>Your have a forever friend for life,</p>
      <p>你拥有了一个真正的朋友，</p>
      <p>And forever has no end.</p>
      <p>永永远远，永无止境。</p>
    </div>
    <div class="light">
      <el-button type="primary" style="margin-top: 20px;" @click="complete">完成阅读</el-button>
    </div>
  </el-card>
</template>

<script>
  export default {
    methods:{
      complete(){
        this.$message({
          message:'恭喜您已完成本篇阅读！',
          type:"success"
        });
        // 跳转至EnglishList页面
        this.$router.replace("/englishList");
      }
    }
  }
</script>
<style scoped>
  .light{
    font-size: 30px;
    text-align: center;
    color: #fefefe;
    text-shadow: 0 0 0.5em #0ae642, 0 0 0.2em #5c5c5c;
    -webkit-animation: shine 2.4s infinite;/*设置动画*/
  }
  @-webkit-keyframes shine{/*创建动画*/
    0%,100%{ color:#fff;text-shadow:0 0 10px #f0d1f8,0 0 10px #0000FF; }
    50%{ text-shadow:0 0 10px #0000FF,0 0 40px #0ae642; }
  }
  .content{
    min-height:350px;
    overflow-y:auto;
    max-height:600px;
  }
  p{
    font-size: 18px;
    color: #fefefe;
    text-shadow:0px 1px 0px #d27878,
    0px 2px 0px #b0b0b0,
    0px 3px 0px #a0a0a0,
    0px 4px 0px #909090,
    0px 5px 10px rgba(0, 0, 0, .9);
  }
</style>
